<template>
    <!-- 老师页面 -->
    <div class="teacher" v-if="curView === 'teacher'">

        <!-- 添加老师按钮 -->
        <div class="handle-box">
            <el-button type="primary" @click="curView = 'add-teacher'">添加老师</el-button>
        </div>

        <!-- 老师列表 -->
        <el-divider style="margin-top: 15px; margin-bottom: 15px;"></el-divider>
        <custom-table
            :tableData="teachers"
            :columnData="teacherColumnData">
            <el-table-column label="操作" width="400">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="showEditTeacher(scope.row.id)">编辑&nbsp;<el-icon><Edit/></el-icon></el-button>
                    <el-button type="success" size="small" @click="showDetail(scope.row.id)">查看详情&nbsp;<el-icon><View/></el-icon></el-button>
                    <el-button type="danger" size="small" @click="showCancelTeacherDialog(scope.row.id)">删除<el-icon><Close/></el-icon></el-button>
                </template>
            </el-table-column>
        </custom-table>
    </div>

    <!-- 添加老师页面 -->
    <div class="add-teacher" v-else-if="curView === 'add-teacher'">
        <h5>添加老师</h5>
        <el-divider />
        <!-- <hr style="margin-bottom: 20px"> -->

        <!-- 添加表单 -->
        <el-form ref="teacherFormRef" style="margin-left: 50px" :model="teacherForm" :rules="rules" label-position="right" label-width="100px"  >
            <el-form-item label="老师姓名" prop="name">
                <el-input v-model="teacherForm.name" placeholder="请输入老师的姓名" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="teacherForm.phone" placeholder="请输入手机号码" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="roleEmail">
                <el-input v-model="teacherForm.roleEmail" placeholder="请输入合法的邮箱" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="teacherForm.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday">
                <el-date-picker v-model="teacherForm.birthday" value-format="YYYY-MM-DD" placeholder="yyyy-mm-dd"></el-date-picker>
            </el-form-item>
            <el-form-item label="老师介绍" prop="introduce">
                <el-input type="textarea" v-model="teacherForm.introduce" placeholder="-讲师的简要介绍-" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="note">
                <el-input type="textarea" v-model="teacherForm.note" placeholder="备注信息" style="width: 500px;"></el-input>
            </el-form-item>

            <!-- 按钮及提示 -->
            <el-form-item>
                <el-button @click="addTeacherDialogVisible = true">保存</el-button>
                <el-dialog title="" v-model="addTeacherDialogVisible" style="width: 444px; height: 350px;">
                    <div class="dialog-content">
                        <el-icon style="font-size: 96px; color: #E6A23C;">
                        <WarningFilled />
                        </el-icon>
                        <h3 class="dialog-title">您确定要添加该老师吗？</h3>
                        <p class="dialog-message">
                            注意:您正在添加一个新的老师！
                        </p>
                    </div>

                    <!-- 弹窗底部的按钮 -->
                    <div slot="footer" class="dialog-footer">
                        <el-button type="info" @click="addTeacherDialogVisible = false" size="large">取消</el-button>
                        <el-button type="danger" @click="addTeacher(teacherFormRef)" size="large">确认</el-button>
                    </div>

                </el-dialog>
                <el-button @click="curView = 'teacher'">取消</el-button>
            </el-form-item>

        </el-form>
    </div>

    <!-- 查看老师详情页面 -->
    <div class="show-detail" v-else-if="curView === 'show-detail'">
        <el-row>
            <!-- 左侧头像部分 -->
            <el-col :span="4" style="text-align: center;">
                <el-image :src="detailTeacher.avatarUrl" style="width: 160px; height: 160px; border-radius: 50%; border: 5px solid lightblue"></el-image>
                <p style="text-align: center; font-size: 18px;" @click="handleAvatar(detailTeacher.id)">点击更换头像</p>
            </el-col>

            <!-- 中间教师信息部分 -->
            <el-col :span="17">
                <div class="teacher-info">
                    <h2>{{ detailTeacher.name }}</h2>
                    <p>性别：{{ detailTeacher.sex }}</p>
                    <p>手机号：{{ detailTeacher.phone }}</p>
                    <p>老师介绍：{{ detailTeacher.introduce }}</p>
                    <p>备注：{{ detailTeacher.note }}</p>
                </div>
            </el-col>

            <!-- 右侧按钮部分 -->
            <el-col :span="3">
                <el-button type="primary" @click="showEditTeacher(detailTeacher.id)">编辑信息</el-button>
                <el-button type="info" @click="curView = 'teacher'">返回</el-button>
            </el-col>
        </el-row>
        <el-divider />

        <!-- 老师分析和上课记录 -->
        <el-tabs type="border-card" width=80%>
            <!-- 老师分析 -->
            <el-tab-pane label="老师分析">
                老师对待教学认真负责，语言生动，条例清晰，举例充分得当，对待学生严格要求，能够鼓励学生踊跃发言，使课堂气氛比较积极热烈
            </el-tab-pane>

            <el-tab-pane label="上课时间轴">
                
                <el-timeline style="max-width: 600px">
                    <el-timeline-item
                      v-for="(activity, index) in activities"
                      :key="index"
                      :color="activity.color"
                      :timestamp="activity.timestamp"
                    >
                      {{ activity.content }}
                    </el-timeline-item>
                  </el-timeline>

            </el-tab-pane>

            <!-- 上课记录 -->
            <el-tab-pane label="上课记录">
                <custom-table
                    :tableData="classRecords1"
                    :columnData="classRecordColumnData1">
                </custom-table>
            </el-tab-pane>
        </el-tabs>
    </div>

    <!-- 编辑老师弹窗 -->
    <div class="edit-teacher" v-else-if="curView === 'edit-teacher'">
        <h5>编辑老师</h5>
        <el-divider />
        <!-- <hr style="margin-bottom: 20px"> -->
        <el-form :model="teacherForm" ref="teacherFormRef" :rules="rules" label-position="right" label-width="100px" style="margin-left: 50px">
            <el-form-item label="老师姓名" prop="name">
                <el-input v-model="teacherForm.name" placeholder="老师姓名" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="teacherForm.phone" placeholder="手机号" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="roleEmail">
                <el-input v-model="teacherForm.roleEmail" placeholder="邮箱" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="teacherForm.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday">
                <el-date-picker v-model="teacherForm.birthday" value-format="YYYY-MM-DD" placeholder="yyyy-mm-dd"></el-date-picker>
            </el-form-item>
            <el-form-item label="老师介绍" prop="introduce">
                <el-input type="textarea" v-model="teacherForm.introduce" placeholder="老师基本信息" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="note">
                <el-input type="textarea" v-model="teacherForm.note" placeholder="备注信息" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="editTeacherDialogVisible = true">保存</el-button>
                <el-dialog title="" v-model="editTeacherDialogVisible" style="width: 444px; height: 350px;">
                    <div class="dialog-content">
                        <el-icon style="font-size: 96px; color: #E6A23C;">
                        <WarningFilled />
                        </el-icon>
                        <h3 class="dialog-title">您确定要更新老师信息么?</h3>
                        <p class="dialog-message">
                            注意:您正在更新老师的信息!
                        </p>
                    </div>

                    <!-- 弹窗底部的按钮 -->
                    <div slot="footer" class="dialog-footer">
                        <el-button type="info" @click="editTeacherDialogVisible = false" size="large">取消</el-button>
                        <el-button type="danger" @click="editTeacher" size="large">确认</el-button>
                    </div>
                </el-dialog>
                <el-button @click="curView = 'teacher'">取消</el-button>
            </el-form-item>
        </el-form>
    </div>

    <!-- 删除老师弹窗 -->
    <el-dialog title="" v-model="cancelTeacherDialogVisible" style="width: 444px; height: 300px;">
        <div class="dialog-content">
            <el-icon style="font-size: 96px; color: #E6A23C;">
            <WarningFilled />
            </el-icon>
            <h3 class="dialog-title">删除确认</h3>
            <p class="dialog-message">
                确认删除此老师信息吗？删除成功后将无法恢复，请谨慎操作！
            </p>
        </div>

        <!-- 弹窗底部的按钮 -->
        <div slot="footer" class="dialog-footer">
            <el-button type="info" @click="cancelTeacherDialogVisible = false" size="large">取消</el-button>
            <el-button type="danger" @click="cancelTeacher" size="large">删除</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import {ref,reactive,onMounted} from 'vue'
import {useClassRecordStore} from '@/store/classRecord'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import CustomTable from '@/components/CustomTable.vue'
import Teachers from '@/api/teacher.js'
import { isTemplate } from 'element-plus/es/utils'

// 老师数据
const teachers = ref([])
const classRecordStore = useClassRecordStore()
const activities = ref(
    [
    {
        "content": "安排了【Spring框架】课程",
        "timestamp": "2024-05-16 20:46",
        "color": "#0bbd87"
    },
    {
        "content": "安排了【JVM】课程",
        "timestamp": "2024-05-06 20:46",
        "color": "#0bbd87"
    },
    {
        "content": "安排了【Spring框架】课程",
        "timestamp": "2024-04-23 20:46",
        "color": "#0bbd87"
    },
    {
        "content": "安排了【JVM】课程",
        "timestamp": "2024-04-13 20:46",
        "color": "#0bbd87"
    },
    {
        "content": "安排了【Linux】课程",
        "timestamp": "2024-04-03 20:46"
    }
]
)

// 添加老师
interface TeacherForm {
    id: number,
    name: string,
    phone: string,
    sex: string,
    birthday: string,
    introduce: string,
    avatarUrl: string,
    note: string,
    roleEmail: string,
}
const teacherForm = reactive<TeacherForm>({
    id: 0,
    name: "",
    phone: "",
    sex: "女",
    birthday: "",
    introduce: "",
    avatarUrl: "",
    note: "",
    roleEmail: "",
})

const teacherFormRef = ref<FormInstance>()
const addTeacher = async (formEl:|FormInstance | undefined) =>{
    console.log('正在添加教师')
    if (!formEl) return
    formEl.validate(async (valid) => {
    if (valid) {
        const temp = await Teachers.addTeacher(teacherForm)
        const res = await Teachers.getTeachers()
        teachers.value = res.data.data;
        teacherForm.name = "";
        teacherForm.phone = "";
        teacherForm.roleEmail = "";
        teacherForm.sex = "";
        teacherForm.birthday = "";
        teacherForm.introduce = "";
        teacherForm.note = "";      
        console.log('submit!')
        ElMessage({
        showClose: true,
        message: '添加成功',
        type: 'success', 
    }); 
    } else {
      console.log('error submit!')
    }
  })  
  addTeacherDialogVisible.value = false 
  curView.value = "teacher";
}

const showEditTeacher = async (id) =>{
    console.log('正在编辑教师')
    const res = await Teachers.getTeacherById(id)
    const temp = res.data.data[0]
    console.log(temp)
    teacherForm.id = id;
    teacherForm.name = temp.name;
    teacherForm.phone = temp.phone;
    teacherForm.roleEmail = temp.roleEmail;
    teacherForm.sex = temp.sex;
    teacherForm.birthday = temp.birthday;
    teacherForm.introduce = temp.introduce;
    teacherForm.note = temp.note;
    curView.value = "edit-teacher";
}

const editTeacher = async () =>{
    console.log('正在编辑教师')
    await Teachers.editTeacher(teacherForm);
    const res = await Teachers.getTeachers()
    teachers.value = res.data.data
    editTeacherDialogVisible.value = false;
    curView.value = 'teacher';
    ElMessage({
        showClose: true,
        message: '更新成功',
        type: 'success',
    });
}

// 查看老师详情
//定义响应式对象【注：此数据应该去后台来获取】
let detailTeacher;
let classRecords1 = []

const handleAvatar = (id) =>{
    // 此处做用户上传头像处理代码
}

const showDetail = async (id) =>{
    
    let res = await Teachers.getTeacherById(id);console.log(res);
    detailTeacher = res.data.data[0];
    classRecords1 = classRecordStore.getClassRecordsByTeacherName(detailTeacher.name);
    curView.value = "show-detail";
}

// 删除老师
const cancelTeacherId = ref(0);

const showCancelTeacherDialog = (id) =>{
    cancelTeacherId.value = id;
    cancelTeacherDialogVisible.value = true;
}

const cancelTeacher = async () =>{
    await Teachers.deleteTeacher(cancelTeacherId.value);
    const res = await Teachers.getTeachers();
    teachers.value = res.data.data;
    cancelTeacherDialogVisible.value = false;
    ElMessage({
        showClose: true,
        message: '该老师已没有排课记录和计划',
        type: 'success',
    });
}

// 页面和弹窗状态
const curView = ref("teacher");
const addTeacherDialogVisible = ref(false);
const editTeacherDialogVisible = ref(false);
const cancelTeacherDialogVisible = ref(false);

//老师授课记录搜索：
const classRecordColumnData1 = [
    { prop:"courseName", label:"课程名", sortable:true},
    { prop:"classTime", label:"上课时间", sortable:true, width:"200px"},
    { prop:"memberId", label:"参加会员", sortable:true},
    { prop:"peopleCount", label:"上课人数", sortable:true},
    { prop:"consumeTimes" ,label:"使用次数", sortable:true},
]
const teacherColumnData = [
    { prop: "name", label: "老师", sortable:true}, 
    { prop: "sex", label: "性别", sortable:true},
    { prop: "phone", label: "手机号", sortable:true},
    { prop: "note", label: "备注", sortable:true}
]

// 必填信息
const rules = reactive<FormRules<TeacherForm>>({
        name: [
          { required: true, message: "老师名字不能为空", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          { pattern: /^1[3-9]\d{9}$/, message: "请输入合法的手机号码格式", trigger: "blur" },
        ],
        roleEmail: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          { type: "email", message: "请输入合法的邮箱", trigger: "blur" },
        ],
        sex: [
          { required: true, message: "性别不能为空", trigger: "blur" },
        ],
      });

onMounted(async ()=>{
    let res = await Teachers.getTeachers();
    teachers.value = res.data.data;
    console.log(teachers.value);    
});
</script>

<style scoped>
ol li{
    line-height:30px;
}
.dialog-content {
  text-align: center;
  margin: 20px 0;
}

.dialog-title {
  font-size: 24px;
  color: #606266;
  margin: 10px 0;
}

.dialog-message {
  font-size: 14px;
  color: #909399;
}

.dialog-footer {
  text-align: center;
}

.teacher-info {
    color: #676a6c;
    font-size: 15px;
}
</style>
